<template>
    <div>
        <input v-model="keyword" placeholder="输入关键字搜索">
        <table class="my-table">
            <thead>
                <tr>
                    <th>就诊日期</th>
                    <th>医生姓名</th>
                    <th>诊断结果</th>
                    <th>处方信息</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in filterList" :key="item.id">
                    <td>{{ item.date }}</td>
                    <td>{{ item.doctor }}</td>
                    <td>{{ item.diagnosis }}</td>
                    <td>{{ item.prescription }}</td>
                    <td @click="showDetail(item)">详情</td>
                </tr>
            </tbody>
        </table>
        <DetailPage v-show="isShow" :detailitem="detailItem" @close="isShow = false"></DetailPage>
    </div>
</template>
<script>
import DetailPage from './SeachBox.vue';

export default {
    props: ['list'],
    data() {
        return {
            keyword: '',
            isShow: false,
            detailItem: {}
        }
    },
    methods: {
        showDetail(item) {
            this.detailItem = item
            this.isShow = true
        }
    },
    components: {
        DetailPage,
    },
    computed: {
        filterList() {
            return this.list.filter(item => {
                return item.doctor.indexOf(this.keyword) > -1
            })
        }
    }
}
</script>
<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>